import PersonalIcon from '../../../Icon/personalIcon'
import Avator from '../../../common/Avator'
import HeaderWrapper from '../../../common/HeaderWrapper'
import HeaderDetail from '../../../common/HeaderWrapper/headerDetail'
import { getPersonalItem, getPersonalLabel, getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import Head from '../components/Title'
import ItemWraper from '../components/ItemWraper'

// import Item from '../components/Item'
import Item from '../../CommonTpl/components/Item'
import { context } from '../../../common/context'

// import style from './index.module.scss'
import { ResumeHead } from './style'

function HeaderItem({ name }) {
  const { resume: { personalDetails, customization } } = context

  const { header, applyAccentColor, layout } = customization
  const [color] = useAccentColor('resumeHeader')
  const iconStyle: any = {
    width: '15px',
    heigth: '15px',
    position: 'absolute',
    left: 0,
    top: '50%',
    transform: 'translateY(-50%)'

  }
  if (applyAccentColor?.includes('icons')) {
    iconStyle.color = color
  }
  const style: any = {
    // paddingBottom: '0.8em',
    marginTop: '8px',
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    whiteSpace: 'nowrap',
    paddingLeft: '20px',
    position: 'relative'
  }
  if (header.position === 'top' && (header.detailsArrangement === 'grid-2' || header.detailsArrangement === 'grid-3')) {
    style.flexDirection = 'column'
  }

  if (layout.detailsPosition === 'top') {
    style.marginTop = '2px'
  }

  const content = getPersonalItem(personalDetails, name)

  const Label = () => {
    if (header.detailsArrangement !== 'wrap') {
      return <div style={ { display: 'flex', }}>
        <div>
          {
            getPersonalLabel(personalDetails, name)
          }
        </div>
        {
          content
        }
      </div>
    }
    return <>
      {
        getPersonalLabel(personalDetails, name).replace(/　/g, '')
      }
      {
        content
      }
    </>
  }

  if (content) {
    return <div style={style}>
      <PersonalIcon name={name} style={iconStyle}></PersonalIcon>
      {
        header.showLabel
          ? <Label />
          : <div>
            {
              content
            }
          </div>
      }
    </div>
  }
  else {
    return null
  }
}
function ResumeHeader(props) {
  const { initMarginH } = props
  const { resume: { personalDetails, customization }, fontScale } = context

  const { layout, spacing, applyAccentColor, header, title, colors } = customization
  const { position, photoObj } = header
  const { marginVertical, marginHorizontal } = spacing
  const { titleBkg } = title || {}

  const detailsOrder = (personalDetails?.detailsOrder || []).filter(item => item !== 'name' && item !== 'expJob')
  const nameStyle: any = {
    fontSize: `${(spacing.fontSize + 15) * fontScale}pt`,
    fontWeight: 'bold',
    lineHeight: `${spacing.lineHeight + 20}pt`,
  }
  if (layout.detailsPosition !== 'top' || position === 'top') {
    nameStyle.marginTop = '20px'
    nameStyle.textAlign = 'center'
  }

  if (applyAccentColor?.includes('name')) {
    nameStyle.color = getRgb(colors?.strong?.accentColor)
  }
  const jobStyle: any = {
    fontSize: `${(spacing.fontSize + 12) * fontScale}pt`,
    fontWeight: '500',
    lineHeight: `${(spacing.lineHeight + 15)}pt`,
    display: 'flex',
    alignItems: 'flex-end'
  }
  if (applyAccentColor?.includes('expJob')) {
    jobStyle.color = getRgb(colors?.strong?.accentColor)
  }
  let titleColor = '#fff'

  if (applyAccentColor?.includes('headings')) {
    titleColor = getRgb(colors?.strong?.accentColor)
  }

  const customStyle: any = { position: 'relative' }
  customStyle.margin = `${(marginVertical || 0) * 2 + initvalue.marginVertical + 25}mm ${(marginHorizontal || 0) * 2 + initvalue.marginHorizontal}mm  0`
  return <div style={{ overflow: 'hidden', background: getRgb(colors.strong?.backgroundColor), color: getRgb(colors.strong?.textColor) }}>
    <ItemWraper style={{ ...customStyle }}>
      <ResumeHead style={{ left: `-${(marginHorizontal || 0) * 2}mm`, color: getRgb(titleBkg) || 'rgba(0,0,0,.04)', }}>
        <div className={'resumeHeadLeft'}>个人简历</div>
        <div className={'resumeHeadRight'}>
          <div className={'resumeHeadTxt'}>Personal resume</div>
          <div className={'resumeHeadTxt'}>我一直在努力成为更好的自己</div>
        </div>

      </ResumeHead>
      <Head name='basicInfo'></Head>
      <Item initMarginH={initMarginH}>
        <HeaderWrapper style={{ padding: 0, marginBottom: 0 }}>
          <Avator {...personalDetails.photoObj}{...photoObj}></Avator>
          <div style={{ flex: 1 }}>
            <div style={{
              display: 'flex',
              margin: '8px 0',
              gap: 10
            }}>
              <div style={nameStyle} id='name'>
                { getPersonalItem(personalDetails, 'name')}
              </div>
              <div style={jobStyle}>
                {
                  getPersonalLabel(personalDetails, 'expJob')
                }
                { getPersonalItem(personalDetails, 'expJob')}
              </div>
            </div>

            <HeaderDetail>
              {
                detailsOrder.map((item) => {
                  return <HeaderItem name={item} key={item} ></HeaderItem>
                })
              }
            </HeaderDetail>
          </div>
        </HeaderWrapper>
      </Item>

    </ItemWraper>

  </div>
}
export default ResumeHeader
